import React, { Component } from 'react'
import PropTypes from 'prop-types'
// React自 15.5 版本以后，就把验证数据类型的模块抽离出去了
// cnpm i prop-types -S
// 验证数据类型
// 定义完组件以后，验证数据类型


function Title (props) {
  return (
    <h1>
      标题 - { props.name } - { props.num }
    </h1>
  )
} 
Title.propTypes = {
  name: PropTypes.string,
  // num: PropTypes.number || PropTypes.string   错误的
  num: PropTypes.oneOfType([ // 一个属性可以是多种的数据类型
    PropTypes.string,
    PropTypes.number
  ])
}

class Content extends Component {
  render () {
    return (
      <section>
        内容 - { this.props.name }
      </section>
    )
  }
}

Content.propTypes = {
  name: PropTypes.string
}
class App extends Component {
  render() {
    return (
      <>
        <Title num={ 100 } name="title"></Title>
        <Title num="200" name="呵呵"></Title>
        <Content name="content"></Content>
      </>
    )
  }
}

export default App
